<template>

  <div class="Navbar">
    <Navbar/>
  </div>
  <div class="post-list">
    <div class="cen">

      <el-row :gutter="6" class="comment-row">
        <el-col :span="isMobile ? 24 : 12" v-for="post in sortedguanhua" :key="post.id" class="comment-col">
          <el-card class="cos-card" shadow="hover">
            <a :href="post.link" target="_blank">
              <div class="post-module-thumb">
                <div class="post-img-box">
                  <span v-for="img in post.imageSrc" :key="img">
                    <el-image :src="img" class="post-thumb" fit="cover"/>
                  </span>
                </div>

              </div>
              <div class="post-info">
                <h3>
                  <a :href="post.link">{{ post.title }}</a>
                </h3>
                <div class="post-list-meta-box">
                  <el-tag class="post-list-cat-item" type="info">日期：{{ post.category }}</el-tag>
                  <div class="meta-right">
                    <span class="meta-view">
                        <el-icon><Lollipop/></el-icon>
                      {{ post.views }}w
                    </span>
                    <span class="meta-like">
                        <el-icon><Promotion/></el-icon>

                    </span>
                  </div>
                </div>
              </div>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-pagination
        @current-change="handlePageChange"
        :page-size="pagedata.page_size"
        :total="totalPosts"
        layout="prev, next">
    </el-pagination>

  </div>
  <div class="but">
    <footers/>
  </div>
</template>

<script>
import {Lollipop, Promotion} from "@element-plus/icons-vue";
import {cosplayStore} from "@/stores/cosplay.js";
import api from "@/api/api.js";

export default {
  components: {Promotion, Lollipop},
  props: {
    // totalPosts: {
    //   type: Number,
    //   default: 0
    // }
  },
  data() {
    return {
      guanhua: [],
      loading: false,  // 加载状态
      currentPage: 1,  // 当前页数
      isMobile: window.innerWidth <= 768,
      totalPosts:null,
      pagedata: {
        page: 0,
        page_size: 10
      },
    };
  },
  mounted() {

    this.loadPosts();

    window.addEventListener('resize', this.handleResize);


  },

  beforeDestroy() {

    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    handleResize() {
      this.isMobile = window.innerWidth <= 768;
    },

    async loadPosts() {
      // 在这里加载更多内容
      await this.loadMorePosts();

    },

    async loadMorePosts() {


      // 加载下一页数据
      this.pagedata.page = this.currentPage;
      await api.get('/guanhua/yh', {params: this.pagedata}).then(res => {
        console.log('加载更多文章成功:', res);
        this.guanhua = res.data.data.posts;
        this.totalPosts = res.data.data.total;
      }).catch(err => {
        console.log('加载更多文章失败:', err);
      });
    },


    async handlePageChange(page) {
      this.currentPage = page; // 更新当前页码
      await this.loadMorePosts(); // 请求当前页的数据
    },
  },

  computed: {
    sortedguanhua() {
      let sorted = [...this.guanhua];
      for (let key in sorted) {
        sorted[key].link = '/detail/' + sorted[key].id;
      }
      if (this.sortColumn) {
        sorted.sort((a, b) => {
          if (this.sortOrder === 'ascending') {
            return a[this.sortColumn] > b[this.sortColumn] ? 1 : -1;
          } else {
            return a[this.sortColumn] < b[this.sortColumn] ? 1 : -1;
          }
        });
      }
      return sorted;
    }
  }
};

</script>

<style scoped>
.post-list {
  margin-top: 80px;
}
@media (min-width: 10px)and (max-width: 375px) {
    .post-thumb {
        width: 126px;
        height: 162px;
  }
    .post-img-box {
      display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
  }
}
@media (min-width: 375px)and (max-width: 425px) {
  .post-thumb {
        width: 143px;
        height: 188px;
  }
  .post-img-box {
      display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
  }
}
@media (min-width: 425px)and (max-width: 600px) {
  .comment-row {
    margin: 0;
  }

  .comment-col {
    margin-bottom: 10px;
  }

  .post-thumb {
        width: 173px;
        height: 218px;
  }

  :deep(.comment-row) {
    margin: 0;
  }

  .post-img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
  }

  .post-img-box span {
    margin: 5px;
    flex-grow: 1;
    flex-shrink: 0;

    border-radius: 4px;

  }

}

@media (min-width: 1350px) {
  .but {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .post-img-box {
    display: flex;
  }

  .cos-card {
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 10px;
  }

  .icon-example {
    font-size: 24px; /* 修改图标的大小 */
    color: #409EFF; /* 修改图标的颜色 */
  }

  .meta-right {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .meta-like {
    display: flex;
    align-items: center;
  }

  .meta-view {
    display: flex;
    align-items: center;

  }

  .post-list {
    margin-top: 80px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .module-title h4 {
    margin: 15px 0;
  }

  .module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cos-card {
    height: 360px;
    margin-bottom: 20px;
    width: 100%;
  }

  .el-image {
    margin: 0 5px;
  }

  .post-thumb {
    width: 200px;
    height: 260px;
    border-radius: 4px;
  }

  .post-pay-type {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .post-info {
    padding: 15px;
  }

  .post-info h3 {
    margin: 0;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .post-list-meta-box {
    margin-top: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }

  .post-list-cat-item {
    margin-bottom: 10px;
  }
}
</style>
